<template>
  <div class="stat-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <stat-card title="总题目数" :value="statData.totalQuestions" icon="question" />
      </el-col>
      <el-col :span="6">
        <stat-card title="活跃题目" :value="statData.activeQuestions" icon="active" />
      </el-col>
      <el-col :span="6">
        <stat-card title="题型种类" :value="statData.typeDistribution.length" icon="type" />
      </el-col>
      <el-col :span="6">
        <stat-card title="平均正确率" :value="avgCorrectness" icon="correct" />
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :span="12">
        <chart-card title="热门题目TOP20">
          <bar-chart :chart-data="topUsedQuestionsChartData" />
        </chart-card>
      </el-col>
      <el-col :span="12">
        <chart-card title="题型分布">
          <pie-chart :chart-data="typeChartData" />
        </chart-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :span="12">
        <chart-card title="题目难度分布">
          <pie-chart :chart-data="difficultyChartData" />
        </chart-card>
      </el-col>
      <el-col :span="12">
        <chart-card title="正确率分布">
          <pie-chart :chart-data="correctnessChartData" />
        </chart-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getQuestionStatistics } from '@/api/stat/stat'
import StatCard from '@/views/stat/components/StatCard'
import ChartCard from '@/views/stat/components/ChartCard'
import PieChart from '@/views/stat/components/PieChart'
import BarChart from '@/views/stat/components/BarChart'

export default {
  name: 'QuestionStatPanel',
  components: {
    StatCard,
    ChartCard,
    PieChart,
    BarChart
  },
  data() {
    return {
      statData: {
        totalQuestions: 0,
        activeQuestions: 0,
        topUsedQuestions: [],
        typeDistribution: [],
        difficultyDistribution: [],
        correctnessDistribution: []
      },
      loading: false
    }
  },
  computed: {
    avgCorrectness() {
      if (this.statData.correctnessDistribution.length === 0) return '0%'
      const total = this.statData.correctnessDistribution.reduce((sum, item) => sum + item.value, 0)
      const correct = this.statData.correctnessDistribution
        .filter(item => item.name.includes('60%') || item.name.includes('80%') || item.name.includes('100%'))
        .reduce((sum, item) => sum + item.value, 0)
      return `${(correct / total * 100).toFixed(1)}%`
    },
    topUsedQuestionsChartData() {
      return {
        columns: ['name', 'value'],
        rows: this.statData.topUsedQuestions
      }
    },
    typeChartData() {
      return {
        columns: ['name', 'value'],
        rows: this.statData.typeDistribution
      }
    },
    difficultyChartData() {
      return {
        columns: ['name', 'value'],
        rows: this.statData.difficultyDistribution
      }
    },
    correctnessChartData() {
      return {
        columns: ['name', 'value'],
        rows: this.statData.correctnessDistribution
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.loading = true
      getQuestionStatistics().then(response => {
        this.statData = response.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.stat-container {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .mt-20 {
    margin-top: 20px;
  }

  .chart-card {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
    height: 400px;
  }
}
</style>
